<template>
  <div class="recommend-wrapper">
    <div class="serach-wrapper">
      <Input v-model="food_name" placeholder="请输入菜式名称" style="width: 200px"></Input>
      <Input v-model="recommend_count" placeholder="推荐次数" style="width: 100px"></Input>
      <Checkbox v-model="comment_has">是否在评论中被提及</Checkbox>
      <Input v-model="score" placeholder="店铺综合分最低要求" style="width: 200px"></Input>
      <Button  @click="startGet" :disabled="food_name.length <= 0">开始抓取</Button>
      <Button @click="stop">暂停</Button>
    </div>
    <div class="data-wrapper">

      <Table   :loading="loading" border :columns="columns" :data="list"></Table>

      <Spin fix  v-show="false">
          <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
      </Spin>
    </div>    
  </div>
</template>

<script>


export default {
  data(){
    return {
      food_name: '',
      recommend_count: '',
      score: '',
      comment_has: false,
      loading:false,
      columns: [
        {
            title: '店铺id',
            key: 'shopId',
            sortable: true
        },
        {
            title: '店铺名称',
            key: 'shopName',
            width: 200,

        },
        {
            title: '推荐次数',
            key: 'recommendCount',
            sortable: true
        },
        {
            title: '被列为喜欢的菜的评论占比',
            key: 'rate'
        },
        {
          title: '总评论数',
            key: 'reviewCountAll'
        },
        {
          title: '提及次数',
          key: 'existsCount'
        },
        {
          title: '综合评分',
          key: 'synthesisScore'
        },
      ],
      list: [
      ]
    }
  },
  methods: {
    validate(){
      if (this.food_name === ''){
        this.$Message.warning('请输入菜式名称?');
        return false;
      }
      return true;
    },
    startGet(){
      if (!this.validate()){
        return;
      }
      let that = this
      that.loading = true;
      let param = {
        food_name: this.food_name
      }
      if (this.comment_has){
        param.comment_has = true
      }
      if (this.score){
        param.score = this.score
      }
      if (this.recommend_count){
        param.recommend_count = this.recommend_count
      }
      axios.get(`http://127.0.0.1:7001/analysis/recommend`,{
        params:param
      })
      .then(function (response) {
        that.list = response.data.data;
        console.log(that.list)
        that.loading = false;
      })
      .catch(function (error) {
        console.log(error);
      }); 
    },
    stop() {

    }
  }
}
</script>

<style>
  .recommend-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  } 
  .demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
</style>
